<template>
	<view>
		<view class="tab-header">
			<view style="margin: 10rpx">
				<uni-segmented-control :current="currentTab" :values="tabList" @clickItem="switchTab"></uni-segmented-control>
			</view>
			<view style="margin: 10rpx">
				<uni-datetime-picker v-model="dateRange" type="daterange" @change="onReportDateChange" :clear-icon="false" />
			</view>
			<view style="margin: 10rpx">
				<uni-data-checkbox v-model="reportType" @change="onReportTypeChange" mode="button" :localdata="reportTypeData" class="flex-center"></uni-data-checkbox>
			</view>
		</view>
		<!-- <view style="height: 50rpx; background-color: #3c96f3;" class="tab-header"><text>我收到的</text></view> -->
		<view v-if="currentTab === 0">
			<report-summary v-for="(item, index) in data" :note="noteTitle" :data="item" @handleClick="handleClick" />
		</view>
		<view v-if="currentTab === 1">
			<report-summary v-for="(item, index) in data" :note="noteTitle" :receive="receive" @handleClick="handleClick" :data="item" />
		</view>
	</view>
</template>

<script>
import uniSegmentedControl from '@/components/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue';
// import reportSummary from '@/pages/tab2/record/report-summary.vue';
import { getReportList } from '@/api/report/report';
import auth from '@/utils/auth';
import { formatDate, getCurrentMonthRange, getCurrentWeekRange } from '@/api/report/utils/utils';

export default {
	data() {
		return {
			reportTypeData: [
				{
					text: '日报',
					value: 1
				},
				{
					text: '周报',
					value: 2
				},
				{
					text: '月报',
					value: 3
				}
			],
			noteTitle: { workNote: '今日工作总结', planNote: '明日工作计划', otherNote: '其他事项' },
			receive: 0, //默认我的回报
			reportType: 1, //默认日报
			dateRange: [formatDate(), formatDate()],
			currentTab: 0,
			data: [],
			tabList: ['我的报告', '我收到']
		};
	},
	methods: {
		handleClick(e) {
			uni.setStorageSync('reportDetail', e);
			uni.navigateTo({
				url: '/pages/tab2/record/report-summary'
			});
		},
		getReport() {
			uni.showLoading({ title: '加载中' });
			let requestParam = {
				reportDate: this.dateRange,
				userId: auth.getUser().userId,
				reportType: this.reportType,
				receive: this.receive
			};
			getReportList(requestParam).then((res) => {
				this.data = res.data;
				uni.hideLoading();
			});
		},
		onReportDateChange(e) {
			this.getReport();
		},
		onReportTypeChange(e) {
			this.reportType = e.detail.value;
			switch (e.detail.value) {
				case 1:
					this.noteTitle = { workNote: '今日工作总结', planNote: '明日工作计划', otherNote: '其他事项' };
					this.dateRange = [formatDate(), formatDate()];
					break;
				case 2:
					this.noteTitle = { workNote: '本周工作总结', planNote: '下周工作总结', otherNote: '其他事项' };
					this.dateRange = getCurrentWeekRange().split('至');
					break;
				case 3:
					this.noteTitle = { workNote: '本月工作总结', planNote: '下月工作总结', otherNote: '其他事项' };
					this.dateRange = getCurrentMonthRange().split('至');
					break;
			}
			this.getReport();
		},
		switchTab(e) {
			if (e.currentIndex == 1) {
				this.receive = 1;
			} else {
				this.receive = 0;
			}
			this.currentTab = e.currentIndex;
			this.getReport();
		},
		submit() {
			this.isFocus = true;
		}
	},
	mounted() {
		this.getReport();
	},
	components: {
		uniSegmentedControl,
	}
};
</script>

<style scoped>
.tab-header {
	display: flex;
	flex-direction: column;
	background: #fff;
	margin: 0 20rpx;
	padding: 20rpx;
	border-radius: 10rpx;
}

.flex-center {
	display: flex;
	justify-content: center;
}
</style>
